<!DOCTYPE html>
<html lang="en">

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">
    <title>蜗牛拍卖</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	
	<script src="js/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>

<div class="container-fluid">
	<div class="container">
		<!-- 头条 -->
		<div class="row" id="title" >
			<!-- logo -->
			<div class="col-sm-5" id="title_img" >
				<img src="images/logo.png" style="height: 90px;width: 300px;">
			</div>
			<!-- 头像 -->
			<div class="col-sm-2" style="text-align:center;">
			</div>
			<!-- 安全退出 -->
			<div class="col-sm-5" id="title_order">
				<ul id="title_ul1" >
					<span><a href="personalCenter.html">个人首页</a></span>
					<span>|</span>
					<span><a href="cart.html">注销</a></span>
					<span>|</span>

				</ul>
				<ul id="title_ul2" >
					<span>您好,<span id="account1"></span>,欢迎您来拍卖!</span>
					<span>[</span>
					<span><a href="#" style="color: orange" onclick="logout()">安全退出</a></span>
					<span>]</span>
				</ul>
			</div>
		</div>
		<!-- 分割线 -->
		<div class="row">
			<div class="col-sm-12" id="title_img" style="height: 40px;" >
				<img src="images/line.png" style="width: 100%;height: 40px;">
			</div>
		</div>
		<div style="height:10px;"></div>
		<div class="row">
			<div style="border:1px;width:300px;height:60px;"></div>
			<div class="row" style="height:50px;">
				<div style="width:30px;"></div>
				<div >
					<div style="height:20px;"></div>
					<span id="search">
						<input id="searchText" style="width:300px;height:30px;" placeholder="  iphone12">
						<button id="search-btn" @click="toSearch()" type="button" class="btn btn-info">搜索</button>
					</span>
				</div>
				<div style="width:400px;">
					<div style="height:25px"></div>
					<div>
						<a href="" style="color:gray"><small>泸州老窖</small></a>
						&nbsp;
						<a href="" style="color:gray"><small>二手手机</small></a>
						&nbsp;
						<a href="" style="color:gray"><small>时尚手表</small></a>
						&nbsp;
						<a href="" style="color:gray"><small>玩具高达</small></a>
					</div>
				</div>
			</div>
		</div>
		<div class="row" style="height:10px;background:#E0E0E0 "></div>
		<div class="row">
			<div id="category" class="col-sm-3" style="border:1px solid white;">
				<div id="category1">
					<a @mouseover="findCategory(1)" @mouseout="updateFlag(1)"  @click="toCategory1(1)">动漫周边</a>
					<a v-if="flags[0]" v-for="(category,key) in categorys" @click="toCategory2(category.co_id,category.ct_id)">/<small>{{categorys[key].name}}</small></a>
				</div>
				<div style="height:10px;"></div>
				<div id="category2">
					<a @mouseover="findCategory(2)" @mouseout="updateFlag(2)"  @click="toCategory1(2)">珠宝</a>
					<a v-if="flags[1]" v-for="(category,key) in categorys" @click="toCategory2(category.co_id,category.ct_id)">/<small>{{categorys[key].name}}</small></a>
				</div>
				<div style="height:10px;"></div>
				<div id="category3">
					<a @mouseover="findCategory(3)" @mouseout="updateFlag(3)"  @click="toCategory1(3)">邮票</a>
					<a v-if="flags[2]" v-for="(category,key) in categorys" @click="toCategory2(category.co_id,category.ct_id)">/<small>{{categorys[key].name}}</small></a>
				</div>
				<div style="height:10px;"></div>
				<div id="category4">
					<a @mouseover="findCategory(4)" @mouseout="updateFlag(4)"  @click="toCategory1(4)">食品</a>
					<a v-if="flags[3]" v-for="(category,key) in categorys" @click="toCategory2(category.co_id,category.ct_id)">/<small>{{categorys[key].name}}</small></a>
				</div>
				<div style="height:10px;"></div>
				<div id="category5">
					<a @mouseover="findCategory(5)" @mouseout="updateFlag(5)"  @click="toCategory1(5)">图书</a>
					<a v-if="flags[4]" v-for="(category,key) in categorys" @click="toCategory2(category.co_id,category.ct_id)">/<small>{{categorys[key].name}}</small></a>
				</div>
				<div style="height:10px;"></div>
			</div>
			<div style="width:5px;background:#E0E0E0;"></div>
			<div class="col-sm-7" style="background:#E0E0E0">
				<div id="app">
				    <div  v-on:mouseover="stop()" v-on:mouseout="move()" class="app">
				        <transition-group tag="ulapp" name="image">
				            <li v-for="(items,index) in list" v-show="index===num" :key="index" >
				                <img :src="items" alt="">
								<div id="rnav" @click="change(index+1)" :class="{'active':index==num}">
								</div>
								<div class="lnav" @click="change(index-1)" :class="{'active':index==num}">
								</div>
				            </li>
				        </transition-group>
				    </div>
				</div>
			</div>
			<div id="boardAndRule">
				<div @click="board()" style="width:175px;height:175px;text-align:center">
					公告>>
					<img style="width:175px;height:145px;" src="images/board.jpeg">
				</div>
				<div @click="rule()" style="width:150px;height:175px; text-align:center">
					拍卖规则>>
					<img style="width:175px;height:150px;" src="images/rule.jpg">
				</div>
			</div>
		</div>
		<div class="row" style="background:white;height:20px;"></div>
		<div id="heat" class="row" style="height:500px;position:relative;left:5%;border:1px solid red;">
			<div style="width:100%;height:50px;">
				<span><h5 style="color:red;">最热拍卖品</h5>
				<h4 style="color:red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hostest Auctions</h4></span>
			</div>
			<div style="height:10px;width:100%"></div>
			<div style="width:100%;height:1px;color:red;border:1px solid red;"></div>
			<div style="height:10px;width:100%"></div>
			<div style="width:100%">
				<div v-for="product in products" style="height:210px;width:270px;float:left;">
					<div @click="toDetail(product.p_id)" style="width: 260px; height: 195px;border:1px solid #ccc; ">
						<div style="width:100%;height:100px;">
							<img style="width:260px;height:100px;" v-bind:src="product.picture">
						</div>
						<div style="width:260px;height:95px;">
							<div>
								{{product.name}}
							</div>
							<div style="float:right;">
								<b>起拍价:<span style="color:red">{{product.starting_price}}元</span></b>
							</div>
							<div>
								起拍:<b>{{ product.auction_time}}</b>
							</div>
							<div>
								出价次数:{{product.chargeNum}}次
							</div>
							<div style="color:red;float:right;">
								<span><b>{{product.details}}</b></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>

	new Vue({
		el:"#heat",
		data:{
			products:[]
		},
		mounted(){
			axios.get("product/findHeat").then(res=>{
				console.info(res);
				this.products=res.data;
			})
		},
		methods:{
			
		}
	})

    new Vue({
        el:'#app',
        data(){
            return{
                data:['1','2','3'],
                time:'',
                num:0,
                list:['images/599dab96041edfc9ec419cb83099401b.jpeg',
                    "images/bd4f23c40ab8e3ea2cbe27a2c1ed371f.jpeg",
                    "images/d62a647a14ddecf0743370ec6296fafe.jpg"],
            }
        },
        methods:{
            play(){
                this.time=setInterval(()=>{
                    this.num++;
                    if(this.num==3){
                        this.num=0
                    }

                },3000)
            },
            change(i){
            	if(i<1){
            		i=3;
            		this.index=3;
            	}
            	if(i>=3){
            		i=0;
            		this.index=0;
            	}
                this.num=i
                
            },
            stop(){
                clearInterval(this.time)
            },
            move(){
                this.play();
            }
        },
        created(){
            this.play();
        },

    });
    new Vue({
    	el:"#search",
    	methods:{
    		toSearch:function(){
    			var text=document.getElementById("searchText").value;
    			if(text=="")
					text="iphone12";
				axios.get("product/findByLike?name="+text+"&pageNum=1").then(res=>{
					console.info(res);
				})
    		}
    	},
    });
    new Vue({
    	el:"#category",
    	data:{
    		categorys:[],
    		flags:[
	    		false,
	    		false,
	    		false,
	    		false,
	    		false
	    	]
    		
    	},
    	methods:{
    		toCategory1:function(co_id){
				window.sessionStorage.setItem("status",1);				
    			var s="category"+co_id+".html";
    			window.open(s);
    		},
    		toCategory2:function(co_id,ct_id){
    			window.sessionStorage.setItem("status",2);
    			window.sessionStorage.setItem("ct_id",ct_id);
    			var s="category"+co_id+".html";
    			window.open(s);
    		},
    		findCategory:function(co_id){
    			axios.get("product/findCategory?co_id="+co_id).then(res=>{
    				console.info(res.data)
    				this.categorys=res.data;
	    			this.flags[co_id-1]=true;
    					
    			})
    		},
    		updateFlag:function(co_id){
    			this.flags[co_id-1]=false;
    		}
    	},
/*     	mounted(){
    		axios.get("product/findCategory2").then(res=>{
    			console.info(res);
    			this.categorys=res.data;
    		})
    	} */
    });
    
    new Vue({
    	el:"#boardAndRule",
    	methods:{
    		board:function(){
    			window.open("board.html");
    		},
    		rule:function(){
    			window.open("rule.html");
    		}
    	}
    });
</script>
</body>

</html>